ConfirmDialog 目前在實作上用於 API 回傳時失敗作為訊息顯示，主要在提示使用者操作錯誤或系統運作錯誤的情況。

PrimeVue 提供 ConfirmationService 讓 ConfirmDialog 元件可跨頁面的操作。

ConfirmationService

ConfirmationService 設定及使用方法：

1. 在 main.js 下設定 ConfirmationService

// main.js
import {createApp} from 'vue';
import ConfirmationService from 'primevue/confirmationservice';

const app = createApp(App);
app.use(ConfirmationService);

2. 在實作上，先將 ConfirmDialog 元件放置在 App.vue 中，再由其他頁面觸發：

// App.vue
<ConfirmDialog :pt="{
      root: {
        class: 'w-80'
      }
}"></ConfirmDialog>

// ConfirmView.vue
<script setup>
import { useConfirm } from 'primevue/useconfirm';

const confirm = useConfirm();

const confirm = () => {
  confirm.require({
    message: '資料已存在(4002)',
    header: '錯誤',
    icon: 'pi pi-exclamation-triangle',
    rejectProps: {
      label: '取消',
      severity: 'secondary',
      outlined: true
    },
    acceptProps: {
      label: '確認',
      severity: 'danger'
    }
  })
};
</script>

<template>
  <main class="p-6">
    <Button @click="confirm()" label="Add" severity="success"></Button>
  </main>
</template>

ConfirmationService 屬性說明

文件說明：https://primevue.org/confirmdialog/#api.confirmationoptions

整理部分項目如下：

1. header：標題名稱
2. message：訊息文字
3. group：可設定 ConfirmDialog 群組，在 confirmation service 可指定要哪個群組的 ConfirmDialog 顯示。
4. position：ConfirmDialog 彈出時的位置
5. icon： PrimeIcons
6. accept：按下accept 按鈕觸發的事件
7. reject：按下 reject 按鈕觸發的事件
8. acceptProps：設定 accept 按鈕內容
9. rejectProps：設定 reject 按鈕內容

accept、reject 事件觸發

在按下確認或取消的按鈕後，可自行定義觸發事件，以下範例結合 Toast 元件，提示使用者確認或拒絕後的訊息。

import { useConfirm } from 'primevue/useconfirm'
import { useToast } from 'primevue/usetoast'

const confirm = useConfirm()
const toast = useToast()

const confirm1 = () => {
  confirm.require({
    message: '確定是否刪除',
    header: '錯誤',
    icon: 'pi pi-exclamation-triangle',
    rejectProps: {
      label: '取消',
      severity: 'secondary',
      outlined: true
    },
    acceptProps: {
      label: '刪除',
      severity: 'danger'
    },
    accept: () => {
      toast.add({ severity: 'info', summary: 'Confirmed', detail: 'You have accepted', life: 3000 })
    },
    reject: () => {
      toast.add({ severity: 'error', summary: 'Rejected', detail: 'You have rejected', life: 3000 })
    }
  })
}

另外也有 onShow、onHide 當 ConfirmDialog 視窗顯示或關閉時，提供觸發函式的方法。

參考連結：https://primevue.org/confirmdialog